<script setup lang='ts'>
  import { reactive, ref, nextTick } from 'vue';
  import { ChallengeApi } from '@/api/controller';
  import { Toastloading, ToastWarning, ToastSuccess, allNumber } from '@/utils/public';
  const $emit = defineEmits(['updateList'])
  const dataForm = ref()
  const formLabelWidth = '130px'
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    game_id:"",
    offer_idArr:[] as Array<any>,
    poolList:[] as Array<any>,
    offer_reward:[] as Array<any>,
  })
  interface formQuert {
    white_id:number
    num_st:number
    num_ed:number
    content:string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    num_st: [
      { required: true, message: '请输入起始次数', trigger: 'change' }
    ],
    num_ed: [
      { required: true, message: '请选择截止次数', trigger: 'change' }
    ],
    content: [
      { required: true, message: '请输入白名单描述', trigger: 'change' }
    ],
  }
  const offerChange = (e:any)=>{
    action.offer_reward = e.map((key:any)=>{
      const obj = action.poolList.find(res=>res.id == key) || { item_name:'' }
      const offerobj = action.offer_reward.find(res=>res.item_id == key) || { num:'' }
      return {
        item_id:key,
        item_name:obj.item_name,
        num:offerobj.num
      }
    })
  }
  const handleSubmit = ()=>{
    let key = action.offer_reward.findIndex(res=> res.num <= 0 )
    if(key >= 0) return ToastWarning('请填写完整的礼物数量')
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      await ChallengeApi.whiteConfigAdd({
        ...form,
        white_reward:JSON.stringify(action.offer_reward)
      }).then(res=>{
        ToastSuccess('新增成功!')
        loading.close()
        closeDialog()
        $emit('updateList')
      }).catch(()=>{
        loading.close()
      })
    })
  }
  const getpoolList = async()=>{
    const loading = Toastloading()
    action.poolList = []
    await ChallengeApi.poolList({
      game_id:action.game_id,
      
    }).then((res) => {
      const { data=[] } = res
      action.poolList = data.filter((res:any)=> res.item_type == 1)
      loading.close()
    }).catch(() => {
      loading.close()
    });
  }
  const openDialog = async(query:any = {})=> {
    const { white_id, game_id } = query
    if(!white_id) return ToastWarning('white_id Not defing')
    if(!game_id) return ToastWarning('game_id Not defing')
    Object.assign(form,{
      white_id,
      num_st:null,
      num_ed:null,
      content:'',
      white_reward:[]
    })
    action.offer_reward = []
    action.offer_idArr = []
    action.game_id = game_id
    await getpoolList()
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="60%"
      title="新增白名单用户">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <div class="flex-wrap between">
          <div>
            <el-form-item :label-width="formLabelWidth" label="起始次数" prop="num_st">
              <el-input v-model="form.num_st" @input="allNumber(form,'num_st')"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="截止次数" prop="num_ed">
              <el-input v-model="form.num_ed" @input="allNumber(form,'num_ed')"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="人物">
              <el-select
              multiple
              filterable
              v-model="action.offer_idArr"
              placeholder="请选择"
              @change="offerChange">
                <el-option
                  v-for="item in action.poolList"
                  :key="item.id"
                  :label="item.item_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="描述" prop="content">
              <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 4}" />
            </el-form-item>
          </div>
          <div>
            <el-form-item
            :label-width="formLabelWidth"
            v-for="(item,index) in action.offer_reward"
            :key="index"
            :label="item.item_name">
              <el-input
              v-model="item.num"
              @input="allNumber(item,'num')"
              placeholder="请填写数量" />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>
  
</style>